<template>
    <MainSlot v-loading="loading">
        <template v-slot:btn>
            <BtnSlot :btnList="btnList" @handleEvent="getBtnEvent"></BtnSlot>
        </template>
        <template v-slot:table>
            <div class="endPageInfo">
                <div class="info">
                    <div class="demo-image__preview">
                        背景图
                        <el-image class="img" v-if="endPageInfo.backgroundImage" style="width: 100%; height: 100%"
                            :fit="'scale-down'" :src="endPageInfo.backgroundImageUrl"
                            :preview-src-list="[endPageInfo.backgroundImageUrl]">
                        </el-image>
                    </div>
                    <div class="demo-image__preview">
                        栏目图
                        <el-image class="img" v-if="endPageInfo.columnChart" style="width: 100%; height: 100%"
                            :fit="'scale-down'" :src="endPageInfo.columnChartUrl"
                            :preview-src-list="[endPageInfo.columnChartUrl]">
                        </el-image>
                    </div>
                    <div class="demo-image__preview">
                        页眉图
                        <el-image class="img" v-if="endPageInfo.headerImage" style="width: 100%; height: 100%"
                            :fit="'scale-down'" :src="endPageInfo.headerImageUrl"
                            :preview-src-list="[endPageInfo.headerImageUrl]">
                        </el-image>
                    </div>
                </div>
                <div>
                    <p>顶部栏标题：{{ endPageInfo.topArticle || '--' }}</p>
                    <p>右侧栏1#名称：{{ endPageInfo.rightColumnOne || '--' }}</p>
                    <p>右侧栏2#名称：{{ endPageInfo.rightColumnTwo || '--' }}</p>
                    <p>网站名称：{{ endPageInfo.headerName || '--' }}</p>
                    <p>主办单位：{{ endPageInfo.organizer || '--' }}</p>
                    <p>联系电话：{{ endPageInfo.phoneNumber || '--' }}</p>
                    <p>地址：{{ endPageInfo.address || '--' }}</p>
                </div>
                <div>
                    <span v-show="endPageInfo.rosterType == 'BLACKLIST'">黑名单ip区间：</span>
                    <span v-show="endPageInfo.rosterType == 'WHITELIST'">白名单ip区间：</span>
                    <span class="ipStyle" :key="index" v-for="ip, index in endPageInfo.ipAdressVoList">{{ `${ip.startIp}
                        - ${ip.endIp}` }}</span>
                </div>
                <div>
                    <p>值班列一：{{ endPageInfo.dutyOne || '--' }}</p>
                    <p>值班列二：{{ endPageInfo.dutyTwo || '--' }}</p>
                    <p>值班列三：{{ endPageInfo.dutyThree || '--' }}</p>
                </div>
            </div>
        </template>
        <template v-slot:dialogModule>
            <AddEdit :title="'页尾配置'" @closeDialog="closeDialog" :enumList="enumList" :addEditFlag="addEditFlag"
                :dialogVisible="dialogVisible" :data="formData">
            </AddEdit>
        </template>
    </MainSlot>
</template>
<script>
import $baseUrl from '@/utils/baseURL';
import MainSlot from "@/components/MainSlot";
import BtnSlot from '@/components/BtnSlot';
import endPage from "@/api/endPage";
import AddEdit from "./components/addEdit.vue";
import enumApi from "@/api/enum";

export default {
    components: { MainSlot, BtnSlot, AddEdit },
    data() {
        return {
            loading: false,
            dialogVisible: false,
            addEditFlag: 'add',
            formData: {},
            endPageInfo: {},
            btnList: ['add'],
            dataList: [],
            enumList: []
        }
    },
    mounted() {
        this.queryEndPage();
        this.initData();
    },
    methods: {
        async initData() {
            let { data: enumObj } = await enumApi.queryRosterType();
            this.enumList = [];
            for (let key in enumObj) {
                this.enumList.push({ value: key, text: enumObj[key] })
            }
        },
        queryEndPage() {
            this.loading = true;
            endPage.queryEndPage().then(res => {
                this.loading = false;
                if (res.code == 0) {
                    let data = res.data;
                    console.log(data)
                    this.endPageInfo = {
                        ...data,
                        headerImageUrl: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.headerImage}`,
                        columnChartUrl: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.columnChart}`,
                        backgroundImageUrl: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.backgroundImage}`
                    }
                } else {
                    this.$message.warning(res.msg || '查询失败')
                }
            }).catch(err => {
                this.loading = false;
                this.$message.warning('查询失败')
            })
        },
        //获取选中Btn
        getBtnEvent(flag) {
            if (flag == 'add') {
                this.formData = JSON.parse(JSON.stringify(this.endPageInfo))
                this.dialogVisible = true

            }
            this.addEditFlag = 'edit'
        },
        //关闭弹窗
        closeDialog() {
            this.dialogVisible = false;
            this.queryEndPage();
        },
    }
};
</script>
<style lang="scss" scoped>
.tableSlot {
    height: 100% !important;

    .endPageInfo {
        width: 100%;
        height: 100%;
    }

    .info {
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: space-around;

        .demo-image__preview {
            padding: 15px;
            background: #fbfbfb;
            width: calc(100% / 3 - 10px);
            height: 100%;
            border: 1px solid #ededed;
            box-shadow: 0px 10px 30px 10px #0000001b;

            .img {
                height: calc(100% - 30px) !important;
            }
        }
    }
}

.ipStyle {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 5px;
    margin-bottom: 5px;
    background-color: #ededed;
    border: 1px solid #cecece;
}
</style>